<template>
    <div>
        <span>获取验证码({{time}}s)</span>
    </div>
</template>

<script setup lang="ts">
// 引入组合式API函数ref
import {ref,watch} from 'vue';
// 倒计时的事件
let time =ref<number>(5);

// 接受父组件传递过来的props->flag,用于控制计数器组件显示与隐藏
let props = defineProps(['fla']);
let $emit = defineEmits(['getFla'])
// 监听父组件传递过来的props数据变化
watch(
    ()=>props.fla,
    ()=>{
        // console.log(123);
        // 开启定时器
        let timer=setInterval(()=>{
            time.value--; 
            if(time.value==0){
                // 通知父组件倒计时模式结束
                $emit('getFla',false);
                // 清除定时器
                clearInterval(timer);
            }
        },1000)
    },
    {
        // 开始先为 true
        immediate:true
    }
)

</script>

<style scoped>

</style>